<!-- 商家发布-个人参加的 -->
<template>
	<view class="page-box">
		<view class="order-box">
			<u-tabs class="order-box-t"
				activeStyle="color: #E27C8A;fontSize: 32rpx"
				lineHeight="6"
				lineColor="#E27C8A"
				inactiveStyle="color: #0F0D21;fontSize: 32rpx"
				:list="statusList"
				@change="handleSearch"></u-tabs>
			<view class="main-box">
				<noData style="margin-top: 200rpx;"
					v-if="!dataList.length"></noData>
				<template v-else>
					<view class="item"
						v-for="(item,index) in dataList"
						:key="index">
						<view class="item-t">
							<image
								style="width: 120rpx;height: 120rpx;border-radius: 50%;margin-right: 24rpx;flex-shrink: 0;"
								:src="item.homeImg"
								@tap.stop="handleImg(item)">
							</image>
							<view class="item-c">
								<view class="aaa"
									style="margin-top: 20rpx;">
									<view class="ccc">
										<text
											style="color: #0F0D21;font-size: 36rpx;font-weight: bold;margin-right: 22rpx;">{{item.title}}</text>
										<view class="scoreIcon"
											style="display: flex;align-items: center;">
											<image style="width: 32rpx;height: 32rpx;margin-right: 8rpx;"
												src="/static/images/scoreIcon.png"></image>
											<text
												style="color: #0F0D21;font-size: 22rpx;">{{`评分 ${item.evaluateLevel || '5.0'}`}}</text>
										</view>
									</view>
									<image v-if="item.status == 1 || item.status == 2"
										@tap.stop="handleCall(item)"
										style="width: 52rpx;height: 52rpx;"
										src="/static/images/callIcon.png"></image>
									<!-- <text style="color: #EC606F;font-size: 24rpx;">{{item.status}}</text> -->
								</view>
								<text
									style="color: #8C8A8A;font-size: 24rpx;margin-top: 16rpx;">{{`预订日期：${dayjsFormat(item.orderDate || '')}`}}</text>
								<view class="iii-box">
									<view class="item-aaa">
										<text>活动场地</text>
										<u--text align="center"
											size="22rpx"
											:lines="1"
											:text="item.businessName"></u--text>
									</view>
									<view class="item-aaa">
										<text>定金</text>
										<text>{{!item.earnestMoney?'0':item.earnestMoney}}</text>
									</view>
									<view class="item-aaa">
										<text>活动费用</text>
										<text style="color: #CF0000;">{{item.amount}}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="item-b">
							<text
								style="color: #EC606F; font-size: 28rpx;">{{item.status===0 ? '待付款':(item.status===1?'已付款':(item.status===2?'已预约':(item.status===3?'已完成':(item.status===4?'已评价':(item.status===5?'已取消':'已退款')))))}}</text>
							<view class="btn-box">
								<button class="box box-1"
									v-if="item.status===0 && (item.userId === userInfo.id)"
									@tap.stop="handlePopOpen(item.id)">支付</button>
								<text class="box box-2"
									v-if="item.status === 1 && ( item.userId === userInfo.id)"
									@tap.stop="handleBtn(item)">申请退款</text>
								<text class="box box-1"
									v-if="item.status === 3 && item.userId === userInfo.id"
									@tap.stop="handleSource(item)">评价</text>
							</view>
	
						</view>
						<!-- <view @touchmove.stop.prevent="disabledScroll"> -->
						<uni-popup ref="popup"
							@touchmove.stop.prevent="stopPrevent"
							type="bottom"
							bgColor=''
							@maskClick="handlePopClose()">
							<view class="form-box">
								<view class="">
									<radio-group @change="radioChange"
										@click.stop="stopPrevent"
										class="recharg-box">
										<view v-for="(item, index) in rechargTypeList"
											:key="item.code"
											class="recharg-box-c">
											<image :src="item.img"></image>
											<text class="recharg-item">{{item.type}}</text>
											<radio class="radio"
												color="#F7A254"
												:value="item.code"
												:checked="index === current" />
											<view class="type-bord"
												v-if="index == 0"></view>
										</view>
									</radio-group>
								</view>
							</view>
							<text class="recharg-btn-box"
								@tap.stop="submitpay(0)">支付</text>
						</uni-popup>
						<!-- </view> -->
					</view>
				</template>
				
				<uni-load-more v-if="dataList.length > 0" :status="loadingType"></uni-load-more>
	
			</view>
		</view>
		<u-modal :show="show"
			title="请对订单进行评价"
			:showCancelButton="true"
			cancelText="取消"
			:closeOnClickOverlay="true"
			@close="() => {description = '';show = false}"
			@cancel="() => {description = '';show = false}"
			@confirm="handleConfirm">
			<view class="slot-content">
				<uni-rate v-model="score"
					margin="12"
					:allowHalf="true"
					activeColor="#EC606F"
					:is-fill="false"
					@change="onChange" />
				<u--textarea v-model.trim="description"
					focus
					placeholder="请对订单进行评价"
					placeholderStyle="color:#8C8A8A;">
				</u--textarea>
			</view>
		</u-modal>
	
	</view>
</template>

<script>
	// 页面组件
	import noData from '@/components/noData/noData.vue'
	import dayjs from 'dayjs';
	
	// 请求api
	import {
		cityOrder, // 我的预约
		paymentOrder,
		postPartyEvaluate
	} from '@/api/cityParty.js'
	
	// vuex引入
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex'
	
	export default {
		name: 'order',
		components: {
			noData
		},
		computed: {
			...mapGetters(['userInfo']),
		},
		// 0-待付款，1-已付款，2-已预约，3-已完成，4-已评价，5-已取消，6-已退款
		data() {
			return {
				loadingType: 'loading', // 是否显示更多
				
				show: false,
				curInfo: {},
				description: '',
				score: 5,
				statusList: [{
						name: '全部',
						value: 999
					}, {
						name: '待付款',
						value: 0
					},
					{
						name: '已付款',
						value: 1
					}, {
						name: '已预约',
						value: 2
					}, {
						name: '已完成',
						value: 3
					}, {
						name: '已评价',
						value: 4
					}, {
						name: '已取消',
						value: 5
					}, {
						name: '已退款',
						value: 6
					}
				],
				dataList: [],
				queryState: {
					pageNum: 1,
					pageSize: 10,
					total: 0,
					isQuery: true,
					status: 999
				},
				rechargType: 'wx',
				isShowPop: false,
				rechargTypeList: [{
					type: '微信',
					code: 'wx',
					img: '../../static/images/wxPay.png'
				}, {
					type: '余额',
					code: 'balance',
					img: '../../static/images/balancePay.png'
				}],
				current: 0,
				row: 0
			};
		},
		onLoad() {},
		onShow() {
		},
		
		// 下拉
		async onPullDownRefresh() {
			
		},
		
		// 触底
		async onReachBottom() {

		},
		methods: {
			// 这是原本的show
			init(){
				this.handleLoadData()
			},
			// 原本的下拉
			async handlePullDownRefresh(){
				console.log('s1111how会执行吗');
				await this.handleLoadData()
				uni.stopPullDownRefresh()
				uni.showToast({
					duration: 5000,
					title: '刷新成功',
					icon: 'none'
				})
			},
			
			// 原本的触底
			async handleReachBottom(){
				console.log('s22222how会执行吗');
				if (!this.queryState.isQuery) return false
				this.queryState.pageNum++
				await this.handCityInit()
			},
			
			
			
			handleConfirm() {
				const {
					id: orderId
				} = this.curInfo
	
				uni.showLoading({
					title: '正在处理中'
				});
				postPartyEvaluate({
					description: this.description,
					score: this.score,
					orderNo: this.curInfo.orderNo
				}).then((res) => {
					if (res.code !== 200) {
						uni.showToast({
							duration: 5000,
							icon: 'none',
							title: res.msg || '请求失败'
						})
						return
					}
					uni.showToast({
						duration: 5000,
						icon: 'none',
						title: '评价成功'
					})
					this.description = ''
					this.show = false
					this.handleLoadData()
				}).catch(({
					message: title = '操作失败'
				}) => {
					uni.showToast({
						duration: 5000,
						icon: 'none',
						title
					})
				}).finally(() => {
					uni.hideLoading();
				})
			},
			handleSource(e) {
				this.show = true
				this.curInfo = e
			},
			dayjsFormat(value) {
				return dayjs(value).format('YYYY-MM-DD HH:mm')
			},
			onChange(e) {
				console.log('rate发生改变:' + JSON.stringify(e), this.score)
				// console.log(this.score);
			},
			open: function() {
				this.$refs.popup[0].open()
			},
			close: function() {
				this.$refs.popup[0].close()
				event.stopPropagation();
			},
			handleImg(e) {
				this.handleTo(
					`/pages/cityParty/detail?id=${e.partyId}`
				)
			},
			handleTo(url) {
				uni.navigateTo({
					url
				})
			},
			handleBtn(e, i) {
				uni.showToast({
					duration: 2000,
					icon: 'none',
					title: '请联系商家进行退款。'
				})
			},
			submitpay() {
				const that = this
				if (!this.rechargType)
					return uni.showToast({
						duration: 5000,
						title: '请选择支付方式',
						icon: 'none'
					})
				uni.showLoading({
					title: '正在处理中'
				});
				//支付方式：0-余额；1-微信；2-支付宝
				paymentOrder({
					orderId: this.row,
					payType: that.rechargType == 'balance' ? 0 : 1
				}).then(res => {
					if (res.code !== 200) {
						uni.showToast({
							duration: 5000,
							icon: 'none',
							title: res.msg || '请求失败',
							complete: () => {
								setTimeout(() => {
									location.reload()
								}, 1000)
							}
						})
						return
					}
					//支付方式：0-余额；1-微信；2-支付宝
					if (that.rechargType == 'balance') {
						uni.showToast({
							duration: 2000,
							icon: 'none',
							title: '支付成功',
							complete: () => {
								setTimeout(() => {
									location.reload()
								}, 1000)
							}
						})
						return
					}
					const payConfig = res.data.result.jsConfig
					const params = {
						appId: payConfig.appId,
						timeStamp: payConfig.timestamp,
						nonceStr: payConfig.nonceStr,
						package: payConfig.package,
						signType: payConfig.signType,
						paySign: payConfig.paySign
					}
					if (typeof WeixinJSBridge == "undefined") {
						if (document.addEventListener) {
							document.addEventListener('WeixinJSBridgeReady', this.wxAppFn(params), false)
						} else if (document.attachEvent) {
							document.attachEvent('WeixinJSBridgeReady', this.wxAppFn(params))
							document.attachEvent('onWeixinJSBridgeReady', this.wxAppFn(params))
						}
					} else {
						this.wxAppFn(params)
					}
				}).finally(() => {
					uni.hideLoading();
				})
			},
			handleCall({
				businessPhone,
			}) {
				if (!businessPhone) return uni.showToast({
					duration: 5000,
					icon: 'none',
					title: '拨打失败，拨打手机号不存在'
				});
				location.href = `tel:${businessPhone}`;
			},
			wxAppFn(params) {
				const that = this
				WeixinJSBridge.invoke('getBrandWCPayRequest', params, function(res) {
					that.handleLoadData()
					if ('get_brand_wcpay_request:ok' === res.err_msg) {
						uni.showToast({
							duration: 2000,
							icon: 'none',
							title: '支付成功',
							complete: () => {
								setTimeout(() => {
									location.reload()
								}, 1000)
							}
						})
						// that.handlePay('success')
						// 使用以上方式判断前端返回,微信团队郑重提示：
						// res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
						// alert('get_brand_wcpay_request:ok')
					} else if (res.err_msg === 'get_brand_wcpay_request:cancel' || res.err_msg ===
						'get_brand_wcpay_request:fail') {
						uni.showToast({
							duration: 5000,
							icon: 'none',
							title: '支付失败',
							complete: () => {
								setTimeout(() => {
									location.reload()
								}, 1000)
							}
						})
						// that.handlePay('error')
					} else {
						uni.showToast({
							duration: 5000,
							icon: 'none',
							title: '支付失败',
							complete: () => {
								setTimeout(() => {
									location.reload()
								}, 1000)
							}
						})
						// that.handlePay('error')
					}
				})
			},
			handleLoadData() {
				
				// loading状态
				this.loadingType = 'loading'
				
				Object.assign(this.queryState, {
					pageNum: 1
				})
				this.dataList = []
				this.handCityInit()
			},
			handlePay(type) {
				if (type === 'success') {
					this.handleLoadData()
	
				} else if (type === 'error') {
					this.handleLoadData()
				}
			},
			handlePopOpen(e) {
				this.open();
				this.row = e
			},
			handlePopClose() {
				this.close();
			},
			stopPrevent() {},
			radioChange: function(evt) {
				for (let i = 0; i < this.rechargTypeList.length; i++) {
					if (this.rechargTypeList[i].code === evt.detail.value) {
						this.current = i;
						this.rechargType = this.rechargTypeList[i].code;
						break;
					}
				}
			},
			async handCityInit() {
				const {
					pageNum,
					pageSize,
					status
				} = this.queryState
				const params = {
					pageNum,
					pageSize,
					status: status === 999 ? null : status
				}
				try {
					uni.showLoading({
						title: '正在加载中'
					});
					const res = await cityOrder(params)
					if (res.code == 200) {
						if (res.data.length < pageSize) {
							this.loadingType = 'noMore'
						}
						
						this.dataList = this.dataList.concat(res.data)
					}
				} catch ({
					message: title = '获取订单列表失败'
				}) {
					Object.assign(this.queryState, {
						isQuery: false
					})
					uni.showToast({
						duration: 5000,
						icon: 'none',
						title
					})
	
				} finally {
					uni.hideLoading();
				}
			},
	
			handleSearch({
				value
			}) {
				this.queryState.status = value
				this.handleLoadData()
			}
		}
	}
</script>

<style lang="scss">
.page-box {
		position: relative;
		box-sizing: border-box;


	}

	.order-box {
		position: absolute;
		top: 0;
		width: 100%;
		display: flex;
		flex-direction: column;

		.order-box-t {
			position: sticky;
			top: 0;
			z-index: 2;


		}

		.main-box {
			margin-bottom: 24rpx;

			.recharg-btn-box {
				// position: fixed;
				margin: 0 30rpx 32rpx 30rpx;
				display: flex;
				flex-direction: column;
				width: 682rpx;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				background: linear-gradient(180deg, #E27C8A 0%, #EC606F 100%);
				border-radius: 40rpx;
				color: #FDF3F3;
				font-size: 36rpx;
			}

			.form-box {
				width: 682rpx;
				margin: 30rpx 30rpx 32rpx 40rpx;
				border-radius: 40rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				padding: 24rpx 40rpx;
				border-radius: 40rpx;
				background: #FFFFFF;
				box-shadow: 0px 0px 16rpx 6rpx rgba(210, 211, 213, 0.5);

				.recharg-box {
					display: flex;
					width: 100%;
					justify-content: space-between;
					padding-left: 20rpx;
					padding-right: 20rpx;

					.recharg-box-c {
						width: 50%;
						display: flex;
						align-items: center;
						justify-content: left;
						// justify-content: space-between;

						&>text {
							padding-right: 70rpx;
							font-size: 28rpx;
							color: #0F0D21;
						}

						&>image {
							width: 40rpx;
							height: 40rpx;
							padding-right: 20rpx;
							// left: 20rpx;
						}

						.type-bord {
							&::after {
								content: "";
								flex: 1 1;
								border-right: 3rpx solid #D9D9D9;
								margin: auto;
								padding-left: 40rpx;
							}
						}

						.radio {
							transform: scale(0.7);
						}

					}


					.recharg-item {
						line-height: 128rpx;
						text-align: left;
						color: #0F0D21;
						font-size: 32rpx;


						&-s {
							color: #EC606F;
						}

						&-p {
							border: 2rpx solid #EC606F;
						}
					}
				}

			}

			.item {
				margin: 24rpx 32rpx 0 32rpx;
				padding: 16rpx 22rpx;
				background: #FFFFFF;
				box-shadow: 0px 0px 16rpx 6rpx rgba(210, 211, 213, 0.5);
				border-radius: 40rpx;

				&-c {
					flex: 1;
				}

				&-t {
					display: flex;
					flex-direction: row;
					padding-bottom: 16rpx;
					border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
					margin-bottom: 16rpx;
				}

				&-b {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.btn-box {
						display: flex;

						.box {
							height: 52rpx;
							line-height: 52rpx;
							border-radius: 26rpx;
							padding: 0 24rpx;
							font-size: 24rpx;
							font-weight: bold;

							margin-right: 16rpx;

							&:last-child {
								margin-right: 0;
							}

							&-1 {
								color: #FDF3F3;
								background: linear-gradient(180deg, #E27C8A 0%, #EC606F 100%);
							}

							&-2 {
								border: 2rpx solid rgba(0, 0, 0, 0.1);
								color: #0F0D21;
							}
						}

					}
				}

				.aaa {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.ccc {
						display: flex;
						align-items: center;
					}
				}
			}
		}
	}

	::v-deep .u-modal__content {
		display: flex;
		padding: 12rpx 24rpx 24rpx 24rpx;

		&>view {
			width: 100%;

		}
	}

	.slot-content {
		display: flex;
		flex-direction: column;
		align-items: center;

		.u-textarea {
			width: 90%;
			margin-top: 24rpx;
		}
	}

	.iii-box {
		padding: 8rpx 0;
		background: rgba(140, 138, 138, 0.2);
		border-radius: 10rpx;
		margin-top: 12rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;

		.item-aaa {
			display: flex;
			flex-direction: column;
			border-right: 2rpx solid rgba(0, 0, 0, 0.1);
			align-items: center;
			flex: 1 1 auto;
			max-width: 30%;

			padding: 0 8rpx;
			box-sizing: content-box;

			&:last-child {
				border-right: 0;
			}

			&>text {
				color: #8C8A8A;
				font-size: 20rpx;

				&:last-child {
					color: #0F0D21;
					font-size: 24rpx;

				}
			}
		}
	}
</style>
